<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="#" />
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
    <title>打印模块</title>
</head>
<body>
    <div class="container" ng-controller="myCtrl">
        <div class="row">
            <div class="col-lg-10">
                <h2 class="text-center">打印机-模板样式</h2>
            </div>
        </div>
        <div class="row" style="padding: 20px 0;">
            <div class="col-lg-12">
                <form class="form-inline">
                    <div class="form-group">
                        <label>模板名称<span style="color: red;font-size: 20px;">*</span></label>
                        <input ng-init="moduleName=null;" ng-model="moduleName" type="text" maxlength="10" class="form-control" placeholder="请输入模板名称">
                    </div>
                    <button type="button" class="btn btn-primary" ng-click="buildCustomTemplate()">保存</button>
                    <button type="button" class="btn btn-danger" ng-click="removeTemplate()">删除</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-5" ng-controller="panelCtrl">
                <div class="component-box">
                    <div class="panel-module" ng-repeat="panelModule in panelModules">
                        <div class="panel-module-title">
                            <h3>{{panelModule.moduleName}} <small>{{panelModule.moduleDescribe}}</small></h3>
                        </div>
                        <div class="panel-module-body">
                            <div ng-repeat="panelComponent in panelModule.components"
                                 ng-class="{'panel-component': true, 'switch-on': componentEnableStaus[panelComponent.id]}"
                                 ng-click="switchComponentStatus(panelComponent.id, componentEnableStaus[panelComponent.id], panelComponent.enable)">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td>{{panelComponent.label}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-7" ng-controller="previewCtrl">
                <div class="template-container">
                    <div class="template-module-list">
                        <div class="template-module" ng-repeat="templateModule in templateModules">
                            <div class="template-row" ng-repeat="templateRow in templateModule.rows">
                                <!--左侧面板 同步 右侧预览组件的显隐-->
                                <div ng-repeat="templateComponent in templateRow.components"
                                     style="{{templateComponent | filterStyle}}"
                                     ng-class="{'template-component': templateComponent.component == null, 'template-component-individuation': templateComponent.component != null}"
                                     ng-show="templateComponent.component == null ? componentEnableStaus[templateComponent.id] && templateComponent.type !== 'hidden' : componentEnableStaus[templateComponent.component.id]"
                                     ng-click="templateComponent.component == null ? doTemplateComponentActive(templateComponent) : null">

                                    <!--text-->
                                    {{templateComponent.value}}
                                    <!--tableTitle-->
                                    <div class="template-component-table-title template-component"
                                         ng-if="templateComponent.tableTitle != null"
                                         ng-click="doTemplateComponentActive(templateComponent.tableTitle)"
                                         style="{{templateComponent.tableTitle | filterStyle}}">

                                        {{templateComponent.tableTitle.value}}
                                    </div>
                                    <div class="template-component-table">
                                        <!--thead-->
                                        <div class="template-component-thead" ng-if="templateComponent.thead != null">
                                            <div class="template-component-tr">
                                                <div class="table-component-td template-component"
                                                     ng-repeat="tableHeadColumn in templateComponent.thead.tableRowSet.columnSet"
                                                     ng-click="doTemplateComponentActive(tableHeadColumn)"
                                                     style="{{tableHeadColumn | filterStyle}}">

                                                    {{tableHeadColumn.value}}
                                                </div>
                                            </div>
                                        </div>
                                        <!--tbody-->
                                        <div class="template-component-tbody" ng-if="templateComponent.tbody != null">
                                            <div class="template-component-tr" ng-if="templateComponent.category != null">
                                                <div class="template-component-td template-component" ng-click="doTemplateComponentActive(templateComponent.category)" style="{{templateComponent.category | filterStyle}}">
                                                    <!--category-->
                                                    {{templateComponent.category.value}}
                                                </div>
                                            </div>
                                            <div class="template-component-tr" ng-repeat="tableTbodyRow in templateComponent.tbody.tableRowSet">
                                                <div class="template-component-td template-component"
                                                     ng-show="tableTbodyRowColumn.refId === 0 ? true : componentEnableStaus[tableTbodyRowColumn.refId]"
                                                     ng-click="doTemplateComponentActive(tableTbodyRowColumn)"
                                                     style="{{tableTbodyRowColumn | filterStyle}}" ng-repeat="tableTbodyRowColumn in tableTbodyRow.columnSet">

                                                    {{tableTbodyRowColumn.value}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--模块分割线-->
                            <hr class="the-divider"/>
                        </div>
                    </div>
                </div>
                <div class="template-property-panel">
                    <div class="panel panel-primary">
                        <div class="panel-heading">属性</div>
                        <div class="panel-body">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label>字体大小：</label>
                                    <input style="width: 100px;" type="text" class="form-control" maxlength="2"
                                        ng-value="parseInt(activeTemplateValueStyle.fontSize)"
                                        ng-model="activeTemplateValueStyle.fontSize"
                                        ng-change="updateTemplateProperty()"
                                        ng-disabled="activeTemplateValueStyle == null"
                                        onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'');}else{this.value=this.value.replace(/\D/g,'')}">
                                </div>
                                <div class="form-group" style="margin-top: 10px;">
                                    <label>文本对齐：</label>
                                    <select class="form-control" ng-model="activeTemplateValueStyle.textAlign" ng-change="updateTemplateProperty()">
                                        <option ng-selected="activeTemplateValueStyle.textAlign == null"></option>
                                        <option ng-selected="activeTemplateValueStyle.textAlign == 'left'" value="left">左对齐</option>
                                        <option ng-selected="activeTemplateValueStyle.textAlign == 'center'" value="center">居中</option>
                                        <option ng-selected="activeTemplateValueStyle.textAlign == 'right'" value="right">右对齐</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="application/javascript" src="assets/angular.js"></script>
    <script type="application/javascript" src="assets/template-web.js"></script>
    <script type="application/javascript" src="js/utils.js"></script>
    <script type="application/javascript" src="js/main.js"></script>
</body>
</html>
